<!--
 * @description  : 实地核查组件
 * @descriptionDetail: 实地核查组件
 * @copyright    : 浙江烟草
 * @author       : lcm
 * @create       : 2022-09-27 09:58:58
-->

<template>
  <view>
    <u-card
      :head-style="headStyle"
      :body-style="bodyStyle"
      margin="20rpx"
      box-shadow="#e5e5e5 0px 0px 50px"
      v-on="listeners"
      @body-click="clickBody"
      @head-click="clickHead"
    >
      <template #head>
        <view :class="licNos.includes(client.licNo) ? 'selected' : ''" style="padding: 5px 0px;">
          <u-icon
            :label="client.customerName"
            size="40"
            style="font-weight: 600"
            label-size="30"
            label-color="#333"
            name="../../../static/fieldAudit/retialer.png"
          ></u-icon>
          <!-- 状态 -->
          <u-tag shape="circle" style="float:right;border:none;" color="#717579" bg-color="#EDEEEF" text="草稿" v-if="client.status == '00'" />
          <u-tag shape="circle" style="float:right;border:none;" type="primary" text="待核查" v-else-if="client.status == '01'" />
          <u-tag shape="circle" style="float:right;border:none;" type="success" text="已核查" v-else />
        </view>
      </template>
      <template #body>
        <u-row>
          <u-col span="12" style="margin-bottom: 5px;" v-if="client.note">
            <u-tag text="无证" type="info" shape="circle" class="tag-info" v-if="!client.isHaveLicense" />
            <u-tag :text="client.note" type="info" shape="circle" class="tag-info" />
          </u-col>
          <u-col span="12" style="margin-bottom: 5px;">
            <u-tag :text="client.taskSourceName" border-color="#ecf5ff" shape="circle" />
            <u-tag :text="client.requestDate" style="margin-left: 5px;padding-right:0px;" border-color="#ecf5ff" shape="circleLeft" />
            <u-tag text="止" shape="circleRight" border-color="#ecf5ff"></u-tag>
          </u-col>
          <u-col span="12" style="margin-bottom: 5px;">
            <view>{{ client.customerAddresses }}</view>
          </u-col>
          <u-col span="4">
            <view class="part-item-info">
              <u-icon :label="client.principalName" size="30" name="../../../static/check/manager.png" v-if="client.principalName"></u-icon>
            </view>
          </u-col>
          <u-col span="4">
            <view class="part-item-info" @click.stop="handlerShowPhone($event)">
              <u-icon label="电话" size="20" name="../../../static/check/phone.png"></u-icon>
            </view>
          </u-col>
          <u-col span="4">
            <view class="part-item-info" @click.stop="handlerGoto($event)">
              <u-icon label="导航" size="36" name="../../../static/check/goto.png"></u-icon>
            </view>
          </u-col>
        </u-row>
      </template>
    </u-card>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service"
import certificateService from "@/service/certificate/certificate.service"
import {dateUtils,} from "@/common/util"
export default {
  name: "FieldCheckItem",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    selectedList: {   // 选中项
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {
      client: {},
      licNos: [],
      tels: [],
      headStyle: {
        margin: '10px 15px 5px 15px',
        padding: 0,
      },
      bodyStyle: {
        margin: '5px 15px',
        padding: 0,
      },
      checkStatDict: this.$u.dic.getByDictCode("I_FIELD_CHECK_STATE"),  // 检查状态
      checkResultDict: this.$u.dic.getByDictCode("I_FIELD_CHECK_RESULT"), // 检查结果
    }
  },
  computed: {
    listeners() {
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
      )
    },
  },
  watch: {
    selectedList: {
      deep: true,
      handler(v) {
        this.licNos = v.map(d => d.licNo);
      },
    },
  },
  mounted(){
    this.client = this.data;
  },
  methods: {
    // 将卡片点击事件抛给父组件
    handlerClick(e) {
      // this.$emit('click', e.target);
    },
    // 点击卡片头部
    clickHead() {
      this.$emit("click-head", this.client);
    },
    // 点击卡片信息
    clickBody() {
      this.$emit("click-body", this.client);
    },
    // 显示联系电话
    handlerShowPhone(e) {
      e.stopPropagation();
      e.preventDefault();
      this.$u.loading("查询中...");
      this.tels = [];
      let paras = {
        keyWrod:this.client.licNo,
      }
      certificateService.getRetailerList(1,10,paras).then(dr => {
        this.$u.hideLoading();
        if (dr.success) {
          if (dr.data.length == 0) {
            this.$u.toast("未查到电话");
            return;
          }
          let telDatas = dr.data;
          telDatas.forEach(t => {
            t.retailTel && this.tels.push(t.retailTel);
          });
          uni.showActionSheet({
            itemList: this.tels,
            itemColor: "#007aff",
            success: ({tapIndex,}) => this.doPhone(this.tels[tapIndex]),
          });
        }
      });

    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(" "));
      this.$deviceApi.makePhoneCall(tel);
    },
    // 导航
    handlerGoto(e) {
      e.stopPropagation();
      e.preventDefault();
      if(!this.client.longitude || !this.client.latitude){
        this.$modal.alert("当前零售户未采集坐标，无法导航");
        return;
      }
      this.$deviceApi.navigateMap(this.client.latitude, this.client.longitude, this.client.companyName);

    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 10px;
}
.tag-info {
  font-weight: 600;
  color: #666;
  margin-right: 5px;
}
.selected {
  border: 1px solid rgb(164, 226, 249) !important;
  box-shadow: #666;
}
</style>
